<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js期末项目</title>
</head>
<body>
	<canvas id="canvas" width="500" height="500" style="border:1px solid black;"></canvas>
    <script>
                //初始化画布环境//
        let canvas = document.getElementById('canvas');
                //获取画笔对象
        let ctx = canvas.getContext('2d');
                //将画布移动到画布长宽一半的位置
        function Clock(){
            let w = canvas.width/2;
            let h = canvas.height/2;
            //在执行函数的时候以长方形的格式清空画布
            ctx.clearRect(0,0,canvas.width,canvas.height);
            //在重置画布之前保存画布状态
            ctx.save();
            ctx.translate(w,h);
            //返回末端添加圆形线帽
            ctx.lineCap='round';
            let date = new Date();
            let hr = date.getHours();
            let min = date.getMinutes();
            let sec = date.getSeconds();
            //当hr小于等于12时，把小时数减去12再显示
            hr = hr >= 12 ? hr-12:hr;
            //绘制表盘的外圈
            ctx.beginPath();
            ctx.arc(0,0,140,0,360*(Math.PI/180),true);
            //将画笔移动到(0,0)处
            ctx.moveTo(0,0);
            //绘制表盘外圈的同时绘画圆心
            ctx.arc(0,0,3,0,360*(Math.PI/180),true);
            ctx.lineWidth = 7;
            ctx.strokeStyle = 'black';
            ctx.stroke();

            //在旋转之前保存一下画布状态，以便后续恢复
            ctx.save();
            //通过for条件循环进行旋转然后绘制十二小时的刻度
            for (let i = 0; i < 12; i++){
                ctx.beginPath();
                //每执行一次函数便将画布旋转一次角度
                ctx.rotate(sec*Math.PI/60);
                ctx.moveTo(100,0);
                ctx.lineTo(120,0);
                ctx.lineWidth = 5;
                ctx.stroke();
                ctx.closePath();
            }
            //恢复原来的备份
            ctx.restore();
            //绘制分钟的刻度(相同原理，但不再是画线而是画圆)
            ctx.save();
            for(let k=0;k<60;k++){
                ctx.beginPath();
                //每执行一次函数便将画布旋转一次角度
                ctx.rotate(sec*Math.PI/60);
                ctx.arc(110,0,2,0,360*Math.PI/180);
                ctx.fillStyle = 'green';
                ctx.fill();
            }
            ctx.restore();
            //绘制秒针
            ctx.save();
            ctx.lineWidth=2;
            ctx.beginPath();
            ctx.moveTo(0,0);
            ctx.lineTo(0,-80);
            ctx.stroke();
            ctx.restore();
            //绘制分针
            ctx.save();
            ctx.lineWidth=4;
            ctx.beginPath();
            //以当前分钟数与PI/30相乘得到应该旋转的角度
            ctx.rotate(min*Math.PI/30);
            ctx.moveTo(0,0);
            ctx.lineTo(0,-50);
            ctx.stroke();
            ctx.restore();
            //绘制时针
            ctx.save();
            ctx.lineWidth=6;
            ctx.beginPath();
            //以当前小时数与PI/6相乘再加上当前分钟数和秒数各自所对应的角度得到应该旋转的角度
            ctx.rotate(hr*Math.PI/6+min*(Math.PI/360)+sec*(Math.PI/21600));
            ctx.moveTo(0,0);
            ctx.lineTo(0,-40);
            ctx.stroke();
            ctx.restore();
            //此处restore是用来恢复画布保存状态的
            ctx.restore();
            requestAnimationFrame(Clock);
            //返回false值，用于停止函数运行
            return false;
        }
        //逐帧运行Clock（）函数
        requestAnimationFrame(Clock);

        </script>
</body>
</html>